<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <el-form inline label-position="left" class="form" size="normal">
                <el-form-item class="formItem">
                    <el-input class="searchInput" v-model="searchInput">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item class="formItem" size="normal">
                    <el-button color="#f5f7f9" size="large" class="searchButton" @click="">搜索</el-button>
                </el-form-item>
                <el-form-item class="formItem" label="资源类型:" size="normal">
                    <el-select v-model="value" class="m-2" placeholder="全部资源" size="normal">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item class="formItem" label="状态:" size="normal">
                    <el-select v-model="value" class="m-2" placeholder="全部" size="normal">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-table :header-cell-style="{ background: '#f5f7f9' }" :data="tableData"
                style="width: 100%; margin-top: 10px" empty-text="'无更多内容'">
                <el-table-column align="center" prop="date" label="内容" width="410" />
                <el-table-column align="center" prop="name" label="发布时间" width="150" />
                <el-table-column align="center" prop="address" label="数据" />
                <el-table-column align="center" prop="address" label="状态" />
                <el-table-column align="center" prop="address" label="操作" />
            </el-table>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { Calendar, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
let searchInput = ref('')
const value = ref('')

const options = [
    {
        value: '1',
        label: '作品',
    },
    {
        value: '2',
        label: '教程',
    },
    {
        value: '3',
        label: '动态',
    },
    {
        value: '4',
        label: '专题',
    },
]
const tableData: never[] = []
</script>

<style scoped>
.searchInput {
	height: 40px;
	width: 270px;
}
.form {
	margin: 0;
	display: flex;
}
.formItem {
	margin: 0 5px;
	font-size: 25px;
}
</style>